﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>vCard - About</title>

	<!-- Meta Data -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no"/>
    <meta name="author" content="ArtTemplate" />
    <meta name="description" content="vCard" />

    <!-- Twitter data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ArtTemplates">
    <meta name="twitter:title" content="vCard">
    <meta name="twitter:description" content="vCard">
    <meta name="twitter:image" content="assets/images/social.jpg">

    <!-- Open Graph data -->
    <meta property="og:title" content="ArtTemplate" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="your url website" />
    <meta property="og:image" content="assets/images/social.jpg" />
    <meta property="og:description" content="vCard" />
    <meta property="og:site_name" content="vCard" />

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-touch-icon-57x57.png">
	<link rel="shortcut icon" href="assets/images/favicons/favicon.png" type="image/png">

    <!-- Styles -->
	<link rel="stylesheet" type="text/css" href="assets/styles/style.css"/>
    
    <link rel="stylesheet" type="text/css" href="assets/demo/style-demo.css"/>
	
</head>
<body>
    <!-- Preloader -->
    <div class="preloader">
	    <div class="preloader__wrap">
		    <div class="circle-pulse">
                <div class="circle-pulse__1"></div>
                <div class="circle-pulse__2"></div>
            </div>
		    <div class="preloader__progress"><span></span></div>
		</div>
	</div>

    <main class="main">
	    <!-- Header Image -->
		<div class="header-image">
		    <div class="js-parallax" style="background-image: url(assets/img/image_header.jpg);"></div>
		</div>
		
	    <div class="container gutter-top">

			<div class="header-page1">

			</div>

		    <div class="row sticky-parent">
			    <!-- Sidebar nav -->
                <aside class="col-12 col-md-12 col-lg-2">
				    <div class="sidebar box sticky-column">
	                    <ul class="nav">
                            <li class="nav__item"><a class="active" href="index.html"><i class="icon-user"></i>About</a></li>
							<li class="nav__item"><a href="resume.html"><i class="icon-file-text"></i>Resume</a></li>
                            <li class="nav__item"><a href="works.html"><i class="icon-codesandbox"></i>Works</a></li>
                            <li class="nav__item"><a href="blog.html"><i class="icon-book-open"></i>Blog</a></li>
                            <li class="nav__item"><a href="contact.html"><i class="icon-book"></i>Contact</a></li>
                        </ul>
					</div>
		        </aside>
		        
				<!-- Content -->
		        <div class="col-12 col-md-12 col-lg-10">
				    <div class="box box-content">
					    <!-- About -->
						<div class="pb-0 pb-sm-2">
		                    <h1 class="title title--h1 first-title title__separate">About Me</h1>
						    <p>I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs.</p>
                            <p>My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.</p>
					    </div>
						
						<!-- What -->
						<div class="mt-1">
						    <h2 class="title title--h3">What I'm Doing</h2>
							<div class="row">
							    <!-- Case Item -->
							    <div class="col-12 col-lg-6">
							        <div class="case-item">
									    <img class="case-item__icon" src="assets/icons/icon-design.svg" alt="" />
										<div>
									        <h3 class="title title--h4">Web Design</h3>
										    <p class="case-item__caption">The most modern and high-quality design made at a professional level.</p>
										</div>	
									</div>
								</div>
								
								<!-- Case Item -->
								<div class="col-12 col-lg-6">
							        <div class="case-item">
									    <img class="case-item__icon" src="assets/icons/icon-dev.svg" alt="" />
										<div>
									        <h3 class="title title--h4">Web Development</h3>
										    <p class="case-item__caption">High-quality development of sites at the professional level.</p>
										</div>
									</div>
								</div>
								
								<!-- Case Item -->
								<div class="col-12 col-lg-6">
								    <div class="case-item">
								        <img class="case-item__icon" src="assets/icons/icon-app.svg" alt="" />
										<div>
								            <h3 class="title title--h4">Mobile Apps</h3>
									        <p class="case-item__caption">Professional development of applications for iOS and Android.</p>
										</div>
								   </div>
								</div>
								
								<!-- Case Item -->
								<div class="col-12 col-lg-6">
								    <div class="case-item">
									    <img class="case-item__icon" src="assets/icons/icon-photo.svg" alt="" />
										<div>
									        <h3 class="title title--h4">Photography</h3>
										    <p class="case-item__caption">I make high-quality photos of any category at a professional level.</p>
										</div>
									</div>
								</div>
							</div>	
						</div>
						
						<!-- Testimonials -->
						<div class="mt-2">
						    <h2 class="title title--h3">Testimonials</h2>
						    <div class="swiper-container js-carousel-review">
                                <div class="swiper-wrapper">
								    <!-- Item review -->
                                    <div class="swiper-slide review-item">
										<svg class="avatar avatar--80" viewBox="0 0 84 84">
                                            <g class="avatar__hexagon">
                                                <image xlink:href="assets/img/avatar-2.jpg" height="100%" width="100%" />
                                            </g>
                                        </svg>
										<div class="review-item__textbox">
											<h4 class="title title--h5">Daniel Lewis</h4>
											<p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
									    </div>
									</div>
									
									<!-- Item review -->
                                    <div class="swiper-slide review-item">
										<svg class="avatar avatar--80" viewBox="0 0 84 84">
                                            <g class="avatar__hexagon">
                                                <image xlink:href="assets/img/avatar-3.jpg" height="100%" width="100%" />
                                            </g>
                                        </svg>
										<div class="review-item__textbox">
											<h4 class="title title--h5">Jessica Miller</h4>
											<p class="review-item__caption">thanks to the skill of Felecia, we have a design that we can be proud of.</p>
										</div>
									</div>
									
									<!-- Item review -->
                                    <div class="swiper-slide review-item">
										<svg class="avatar avatar--80" viewBox="0 0 84 84">
                                            <g class="avatar__hexagon">
                                                <image xlink:href="assets/img/avatar-4.jpg" height="100%" width="100%" />
                                            </g>
                                        </svg>
										<div class="review-item__textbox">
											<h4 class="title title--h5">Tanya Ruiz</h4>
											<p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
										</div>
									</div>
									
									<!-- Item review -->
                                    <div class="swiper-slide review-item">
										<svg class="avatar avatar--80" viewBox="0 0 84 84">
                                            <g class="avatar__hexagon">
                                                <image xlink:href="assets/img/avatar-5.jpg" height="100%" width="100%" />
                                            </g>
                                        </svg>
										<div class="review-item__textbox">
											<h4 class="title title--h5">Thomas Castro</h4>
											<p class="review-item__caption">thanks to the skill of Felecia, we have a design that we can be proud of.</p>
										</div>
									</div>
                                </div>
    
                                <div class="swiper-pagination"></div>
                            </div>
						</div>
						
						<!-- Clients -->
						<div class="mt-4">
						    <h2 class="title title--h3">Clients</h2>
							
							<div class="swiper-container js-carousel-clients">
                                <div class="swiper-wrapper">
								    <!-- Item client -->
                                    <div class="swiper-slide">
									    <a href="#"><img src="assets/img/logo-1.svg" alt="Logo" /></a>
									</div>
									
								    <!-- Item client -->
                                    <div class="swiper-slide">
									    <a href="#"><img src="assets/img/logo-2.svg" alt="Logo" /></a>
									</div>

								    <!-- Item client -->
                                    <div class="swiper-slide">
									    <a href="#"><img src="assets/img/logo-3.svg" alt="Logo" /></a>
									</div>

								    <!-- Item client -->
                                    <div class="swiper-slide">
									    <a href="#"><img src="assets/img/logo-4.svg" alt="Logo" /></a>
									</div>
									
								    <!-- Item client -->
                                    <div class="swiper-slide">
									    <a href="#"><img src="assets/img/logo-1.svg" alt="Logo" /></a>
									</div>
									
									<!-- Item client -->
                                    <div class="swiper-slide">
									    <a href="#"><img src="assets/img/logo-2.svg" alt="Logo" /></a>
									</div>
								</div>
								
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
					
					<!-- Footer -->
					<footer class="footer">© 2020 vCard</footer>
		        </div>
			</div>
		</div>	
    </main>

    <!-- SVG masks -->
    <svg class="svg-defs">
        <clipPath id="avatar-box">
            <path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"/>
        </clipPath>
        <clipPath id="avatar-hexagon">
             <path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"/>
        </clipPath>		
    </svg>
	
    <div class="back-to-top"></div>
    
	 
	
	<!-- JavaScripts -->
	<script src="assets/js/jquery-3.4.1.min.js"></script>
	<script src="assets/js/plugins.min.js"></script>
    <script src="assets/js/common.js"></script>
	
	<script src="assets/demo/plugins-demo.js"></script>

	<script src="assets/demo/plugins-demo.js"></script>

	<!--后添加的js-->
	<!--加载header-->
	<script>
		//注 load里面是header.html的文件路径，同个目录直接文件名称就可以了。
		$('.header-page1').load("header-page.html");
		//注 load方法是异步的，如果你想对引入的文件dom进行操作 必须在其回调函数中操作 否则会获取不到dom节点
	</script>


</body>
</html>